@use 'sass:color';

.question-and-answer-page{
    .picshare-wrap{
        position: absolute;
        background: linear-gradient(to bottom, rgba(144,180,206, 0.4), rgba(144,180,206, 1));
        min-height: 1100px;
        top: 0;
        left: 50%;
        width: 640px;
        margin-left: -320px;
        transform-origin: 0% 0%;
        padding-top: 15px;
        overflow: hidden;
        &:before{
            content: "";
            position: absolute;
            top: -100px;
            right: -100px;
            width: 200px;
            height: 200px;
            background-color: rgba(#fff, 0.2);
            border-radius: 50%;
        }
        &:after{
            content: "";
            position: absolute;
            top: -90px;
            right: -90px;
            width: 180px;
            height: 180px;
            background-color: rgba(#fff, 0.25);
            border-radius: 50%;
        }
        .left-bottom-tag{
            position: absolute;
            bottom: -100px;
            left: -100px;
            width: 200px;
            height: 200px;
            background-color: rgba(#fff, 0.15);
            border-radius: 50%;
        }
        .left-bottom-tag2{
            position: absolute;
            bottom: -90px;
            left: -90px;
            width: 180px;
            height: 180px;
            background-color: rgba(#fff, 0.2);
            border-radius: 50%;
        }
        h4{
            position: relative;
            // color: #fff;
            font-size: 45px;
            font-weight: bold;
            letter-spacing: 8px;
            text-align: center;
            line-height: 2.5;
            text-shadow: 2px 2px 4px #aaa;
            // outline: 1px solid #f00;
            padding-left: 4px;

            &:before,&:after{
                position: absolute;
                content: '';
                top: 50%;
                margin-top: -7px;
                width: 14px;
                height: 14px;
                transform-origin: center center;
                transform: scaleX(0.8) rotate(45deg);
                background-color: color.adjust(rgb(144,180,206), $lightness: -10%);
                box-shadow: 0 0 6px 3px rgba(#000, 0.1);
            }
            &:before{
                left: 20%;
            }
            &:after{
                right: 20%;
            }
        }

        .image-selector{
            position: absolute;
            top: 130px;
            bottom: 200px;
            right: 16px;
            width: 56%;
            border-radius: 30px;
            border: 1px dashed rgba(#000, 0.5);
            z-index: 2;
            box-shadow: 0 0 6px 3px rgba(#000, 0.2);
            &.noborder{
                border: none;
            }
            &:before{
                content: '点击选择图片';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1;
            }
            img{
                position: absolute;
                z-index: 2;
                width: 100%;
                height: 100%;
                border-radius: 20px;
            }
            input{
                position: absolute;
                // outline: 1px solid #f00;
                display: block;
                width: 100%;
                height: 100%;
                opacity: 0;
                top: 0;
                left: 0;
                z-index: 3;
            }
        }

        .qrcode-img{
            position: absolute;
            width: 150px;
            right: 20px;
            bottom: 22px;
            height: 150px;
            border-radius: 6px;
        }

        p.bottom-text{
            position: absolute;
            bottom: 120px;
            left: 30px;
            font-size: 27px;
            margin-top: 80px;
            letter-spacing: 0px;
            font-weight: bold;
            // color: #fff;
            white-space: nowrap;
        }

        .left-img{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            // outline: 1px solid #f00;
            top: 130px;
            bottom: 200px;
            width: calc(44% - 16px);
            z-index: 1;
            .img{
                // margin-left: -19px;
                // outline: 1px solid #f00;
                width: 100%;
                background-size: auto 100%;
                background-image: url('@/assets/kj/yutong02.png');
                height: calc(100% - 360px);
                background-repeat: no-repeat;
                background-position: center center;
            }
            h5{
                text-align: center;
                font-size: 39px;
                font-weight: bold;
                letter-spacing: 5px;
                line-height: 2.4;
                span{
                    font-size: 22px;
                    margin-left: 10px;
                    letter-spacing: 1px;
                }
            }
            ul{
                padding-left: 8px;
                font-size: 22px;
                li{
                    display: flex;
                    align-items: center;
                    line-height: 1.8;
                    &:before{
                        content: "";
                        display: block;
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        background-color: #555;
                        margin-right: 7px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 640px) {
    .question-and-answer-page{
        .picshare-wrap{
            top: 0;
            left: 0;
            margin-left: 0;
        }
    }
}